<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>现代化物业管理系统</h2>
        <p>
          本系统是一款基于SpringBoot与Vue开发的现代化物业管理平台，适用于各类住宅小区、商业写字楼、园区管理等场景。
          提供业主管理、报修服务、缴费通知、公告发布等一站式服务， 前后端分离架构。
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
      </el-col>
    </el-row>

    <el-divider />

    <!-- 系统公告区域 -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>通知公告</span>
          </div>
          <div class="body">
            <div v-if="noticeList.length > 0">
              <el-timeline>
                <el-timeline-item
                  v-for="item in noticeList"
                  :key="item.noticeId"
                  :timestamp="item.noticeType === '1' ? '通知' : '公告'"
                  placement="top"
                >
                  <h4>{{ item.noticeTitle }}</h4>
                  <p v-html="item.noticeContent"></p>
                </el-timeline-item>
              </el-timeline>
            </div>
            <p v-else>暂无公告。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />


  </div>
</template>

<script>
import { listNormalNotice } from '@/api/system/notice'

export default {
  name: "Index",
  data() {
    return {
      version: "3.8.9",
      noticeList: []
    };
  },
  created() {
    this.getNoticeList()
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    async getNoticeList() {
      try {
        const res = await listNormalNotice()
        this.noticeList = res.data || []
      } catch (err) {
        console.error("获取公告失败", err)
      }
    }
  }
};
</script>


<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
